<template>
    <div class="content">
        <van-goods-action>
            <van-goods-action-icon
                icon="star"
                text="已收藏"
                color="#ff5000"
                @click="boolean = false"
                v-show="boolean"
            />
            <van-goods-action-icon
                icon="star-o"
                text="未收藏"
                color="#ff5000"
                @click="boolean = true"
                v-show="!boolean"
            />
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge" @click="shopping" />
            <van-goods-action-button type="warning" text="加入购物车" @click="buyClick" />
            <van-goods-action-button type="danger" text="立即购买" @click="handClick" />
        </van-goods-action>
        <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
            :goods-id="id"
            @add-cart="addCart"
            @buy-clicked="buyClicks"
            :reset-stepper-on-hide="true"
            ref="sku"
        />
    </div>
</template>

<script>
export default {
    name: 'AppGoodActive',
    props: ['id'],
    data() {
        return {
            productListId: 0,
            badge: 0,
            boolean: false,
            show: false,
            sku: {
                tree: [],
                hide_stock: false,
                price: 0,
                stock_num: 0
            },
            goods: {
                picture: ''
            },
            cartList: [],
            cartTotal: {}
        }
    },
    created() {
        this.bus()
        this.$bus.$on('AppGoodInfo', data => {
            const { info, productListId } = data
            this.sku.price = info.retail_price
            this.sku.stock_num = info.goods_number
            this.goods.picture = info.list_pic_url
            this.productListId = productListId
        })
    },
    mounted() {},
    methods: {
        // 在弹出层的中 点击购物车
        addCart(res) {
            if (!window.sessionStorage.getItem('token')) {
                this.$toast({
                    message: '未登录'
                })
                return
            }
            this.show = false
            this.$toast({
                message: '购买成功',
                icon: 'arrow-down'
            })
            this.$http
                .post('/cart/add', {
                    goodsId: this.id,
                    productId: this.productListId,
                    number: res.selectedNum
                })
                .then(res => {
                    if (res.data.errno != 0) {
                        console.log(res.data.errmsg)
                        return
                    }
                    this.bus()
                    const { cartList, cartTotal } = res.data.data
                    this.cartTotal = cartTotal
                    this.cartList = cartList
                })
                .catch(err => {
                    console.log(err)
                })
        },
        //在弹出层的中 点击购买
        buyClicks() {
            this.$toast({
                message: '该功能暂未开放'
            })
        },
        // 点击购物车
        buyClick() {
            console.log(this.$refs.sku.getSkuData())
            this.show = true
        },
        //点击购买按钮
        handClick() {
            this.$toast({
                message: '该功能暂未开放'
            })
        },
        // 购物车小图标
        shopping() {
            if (!window.sessionStorage.getItem('token')) {
                this.$notify({ type: 'success', message: '未登录', duration: 800 })
            } else {
                this.$router.push({
                    name: 'cart',
                    params: {
                        cartList: this.cartList,
                        cartTotal: this.cartTotal
                    }
                })
            }
        },
        //购物车数量
        bus() {
            if (!window.sessionStorage.getItem('token')) {
                this.badge = 0
                return
            }
            this.$http
                .get('/cart/goodscount')
                .then(res => {
                    if (res.data.errno != 0) {
                        console.log(res.data.errmsg)
                    }
                    this.badge = res.data.data.cartTotal.goodsCount
                    console.log('请求成功')
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }
}
</script>

<style scoped>
.content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
</style>